<template>
  <form-layout :breadcrumbs="breadcrumbs" :tabs="tabs" :actionBtns="btns">
    <template slot="form">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item
          ref="name"
          label="Activity name"
          prop="name"
          :rules="[
            { required: true, message: 'Please input Activity name' },
            { min: 3, max: 5, message: 'Length should be 3 to 5' }
          ]"
        >
          <a-input
            v-model="form.name"
            @blur="
              () => {
                $refs.name.onFieldBlur()
              }
            "
          />
        </a-form-model-item>
        <a-form-model-item
          label="Activity zone"
          prop="region"
          :rules="[{ required: true, message: 'Please select Activity zone' }]"
        >
          <a-select v-model="form.region" placeholder="please select your zone">
            <a-select-option value="shanghai">
              Zone one
            </a-select-option>
            <a-select-option value="beijing">
              Zone two
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          label="Activity time"
          required
          prop="date1"
          :rules="[{ required: true, message: 'Please pick a date' }]"
        >
          <a-date-picker
            v-model="form.date1"
            show-time
            type="date"
            placeholder="Pick a date"
            style="width: 100%;"
          />
        </a-form-model-item>
        <a-form-model-item label="Instant delivery" prop="delivery">
          <a-switch v-model="form.delivery" />
        </a-form-model-item>
        <a-form-model-item
          label="Activity type"
          prop="type"
          :rules="[
            {
              type: 'array',
              required: true,
              message: 'Please select at least one activity type'
            }
          ]"
        >
          <a-checkbox-group v-model="form.type">
            <a-checkbox value="1" name="type">
              Online
            </a-checkbox>
            <a-checkbox value="2" name="type">
              Promotion
            </a-checkbox>
            <a-checkbox value="3" name="type">
              Offline
            </a-checkbox>
          </a-checkbox-group>
        </a-form-model-item>
        <a-form-model-item
          label="Resources"
          prop="resource"
          :rules="[
            { required: true, message: 'Please select activity resource' }
          ]"
        >
          <a-radio-group v-model="form.resource">
            <a-radio value="1">
              Sponsor
            </a-radio>
            <a-radio value="2">
              Venue
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item
          label="Activity form"
          prop="desc"
          :rules="[{ required: true, message: 'Please input activity form' }]"
        >
          <a-input v-model="form.desc" type="textarea" />
        </a-form-model-item>
      </a-form-model>
      <a-form-model
        ref="ruleForm1"
        :model="form1"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item
          ref="name1"
          label="Activity name"
          prop="name1"
          :rules="[
            { required: true, message: 'Please input Activity name' },
            { min: 3, max: 5, message: 'Length should be 3 to 5' }
          ]"
        >
          <a-input v-model="form1.name1" />
        </a-form-model-item>
        <a-form-model-item
          label="Activity zone"
          prop="region"
          :rules="[{ required: true, message: 'Please select Activity zone' }]"
        >
          <a-select
            v-model="form1.region"
            placeholder="please select your zone"
          >
            <a-select-option value="shanghai">
              Zone one
            </a-select-option>
            <a-select-option value="beijing">
              Zone two
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          label="Activity time"
          required
          prop="date1"
          :rules="[{ required: true, message: 'Please pick a date' }]"
        >
          <a-date-picker
            v-model="form1.date1"
            show-time
            type="date"
            placeholder="Pick a date"
            style="width: 100%;"
          />
        </a-form-model-item>
        <a-form-model-item label="Instant delivery" prop="delivery">
          <a-switch v-model="form1.delivery" />
        </a-form-model-item>
        <a-form-model-item
          label="Activity type"
          prop="type"
          :rules="[
            {
              type: 'array',
              required: true,
              message: 'Please select at least one activity type'
            }
          ]"
        >
          <a-checkbox-group v-model="form1.type">
            <a-checkbox value="1" name="type">
              Online
            </a-checkbox>
            <a-checkbox value="2" name="type">
              Promotion
            </a-checkbox>
            <a-checkbox value="3" name="type">
              Offline
            </a-checkbox>
          </a-checkbox-group>
        </a-form-model-item>
        <a-form-model-item
          label="Resources"
          prop="resource"
          :rules="[
            { required: true, message: 'Please select activity resource' }
          ]"
        >
          <a-radio-group v-model="form1.resource">
            <a-radio value="1">
              Sponsor
            </a-radio>
            <a-radio value="2">
              Venue
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item
          label="Activity form"
          prop="desc"
          :rules="[{ required: true, message: 'Please input activity form' }]"
        >
          <a-input v-model="form1.desc" type="textarea" />
        </a-form-model-item>
      </a-form-model>
    </template>
    <template slot="actionBtns">
      <a-button type="primary" @click="onSubmit">
        Create
      </a-button>
      <a-button
        style="margin-left: 10px;"
        @click="resetForm('ruleForm,ruleForm1')"
      >
        Reset
      </a-button>
    </template>
  </form-layout>
</template>

<script>
import formMixin from '@/mixins/form-mixin.js'

export default {
  mixins: [formMixin],
  data () {
    return {
      form: {
        name: '',
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      form1: {
        name1: '',
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      breadcrumbs: ['首页', '测试表单'],
      tabs: [{ key: 'new', name: '新增供应商信息' }],
      btns: [
        { key: 'key1', name: 'key1' },
        { key: 'key3', name: 'key3' }
      ]
    }
  },
  methods: {
    onSubmit () {
      this.validateForm('ruleForm,ruleForm1')
        .then(res => {
          console.log(res)
        })
        .catch(res => {
          console.log('err', res)
        })

      console.log('submit!', this.form)
    }
  }
}
</script>

<style></style>
